<template>
  <div>
    <div class="search">
      <My-search @child-event="handChildData" @child-reset="resetFun">
        <template #title> 分类名称 </template>
      </My-search>
    </div>
    <div class="main">
      <el-button
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="addFun"
        >新增</el-button
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="分类名称" width="300">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="300">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="list.total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Category } from "../../units/api.js";
import { CategoryDel } from "../../units/api.js";
import { CategoryAdd } from "../../units/api.js";
import MySearch from "../../components/SearchView.vue";
export default {
  data() {
    return {
      list: {
        current: 1,
        size: 10,
        endDate: "",
        startDate: "",
        categoryName: "",
        categoryId: "",
        total: null,
      },
      tableData: [],
    };
  },
  components: {
    MySearch,
  },
  created() {
    this.getList();
  },
  methods: {
    //搜索
    handChildData(input, dateStart, dateEnd) {
      // console.log("这是父组件", input, dateStart, dateEnd);
      this.list.categoryName = input;
      if (dateStart) {
        this.list.startDate = dateStart.toLocaleString().replace(/[/]/g,"-");
        this.list.endDate = dateEnd.toLocaleString().replace(/[/]/g,"-");
      }
      console.log(
        "赋值后的数据",
        this.list.categoryName,
        this.list.startDate,
        this.list.endDate
      );
      this.getList();
    },
    //获取数据
    async getList() {
      let res = await Category(this.list);
      console.log(res);
      this.tableData = res.data.data;
      this.list = res.data;
    },
    // 添加
    addFun() {
      this.$prompt("分类名称", "新增分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern:
        //   /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: "邮箱格式不正确",
      })
        .then(async({ value }) => {
          this.list.name = value
          let res = await CategoryAdd(this.list)
          console.log(res);
          
          this.$message({
            type: "success",
            message:value + "添加成功了",
          });
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 重置
    resetFun() {
      this.list.startDate = "";
      this.list.endDate = "";
      this.list.categoryName = "";
      this.getList();
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
      this.list.categoryId = row.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await CategoryDel(this.list);
          console.log(res);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //翻页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.list.current = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.search {
  margin-bottom: 1vw;
}
.main {
  background-color: white;
  text-align: start;
}
.main > .el-button {
  margin: 10px;
}
</style>